// 使用 localStorage 存储用户数据和登录状态
let users = JSON.parse(localStorage.getItem('users')) || [
    { username: "user1", password: "123456" },
    { username: "user2", password: "123456" },
    { username: "user3", password: "123456" }
];

// 存储当前验证码用于验证
let currentCaptcha = "";

// DOM 元素引用
const mainCaptcha = document.getElementById('mainCaptcha');
const refreshCaptcha = document.getElementById('refreshCaptcha');
const loginBtn = document.getElementById('loginBtn');
const errorMessage = document.getElementById('errorMessage');
const registerLink = document.getElementById('registerLink');

let usernameInput = document.getElementById('username');
let passwordInput = document.getElementById('password');
let captchaInput = document.getElementById('captcha');
let rememberMeCheckbox = document.getElementById('remember');

/**
 * @brief 获取或重新获取登录/注册表单中的 DOM 元素引用
 * 当通过 innerHTML 重新渲染表单内容时，需要调用此函数
 */
function getFormElements() {
    usernameInput = document.getElementById('username');
    passwordInput = document.getElementById('password');
    captchaInput = document.getElementById('captcha');
    rememberMeCheckbox = document.getElementById('remember');
}

/**
 * @brief 生成随机验证码文本
 * @param {number} length 验证码长度，默认为4
 * @returns {string} 生成的随机验证码字符串
 */
function getRandomText(length = 4) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

/**
 * @brief 生成随机十六进制颜色代码
 * @returns {string} 随机生成的颜色字符串（如 #RRGGBB）
 */
function getRandomColor() {
    const r = Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
    const g = Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
    const b = Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
    return `#${r}${g}${b}`;
}

/**
 * @brief 生成并显示新验证码
 * 更新验证码文本、颜色和背景颜色
 */
function generateCaptcha() {
    currentCaptcha = getRandomText();
    if (mainCaptcha) {
        mainCaptcha.textContent = currentCaptcha;
        mainCaptcha.style.color = getRandomColor();
        mainCaptcha.style.backgroundColor = getRandomColor();
    }
}

/**
 * @brief 更换验证码（点击验证码图片或"更换"按钮时调用）
 */
function changeCaptcha() {
    generateCaptcha();
}

/**
 * @brief 显示自定义消息框（替代 alert()）
 * @param {string} message 要显示的消息内容
 * @param {string} type 消息类型，可以是 'error' 或 'success'
 */
function showCustomMessage(message, type = 'error') {
    let messageBox = document.querySelector('.custom-message-box');
    if (!messageBox) {
        messageBox = document.createElement('div');
        messageBox.className = 'custom-message-box';
        document.body.appendChild(messageBox);
    }

    messageBox.textContent = message;
    messageBox.className = `custom-message-box ${type}`; // 重置类
    setTimeout(() => {
        messageBox.classList.add('show');
    }, 10); // 短暂延迟以触发过渡效果

    setTimeout(() => {
        messageBox.classList.remove('show');
        setTimeout(() => {
            if (messageBox.parentNode) {
                messageBox.parentNode.removeChild(messageBox);
            }
        }, 300); // 等待过渡效果完成后再移除
    }, 2000); // 消息显示2秒
}

/**
 * @brief 登录验证函数
 * 验证验证码、用户名和密码，并处理登录成功或失败的逻辑
 */
function validateLogin() {
    getFormElements(); // 确保元素引用是最新的

    const username = usernameInput.value;
    const password = passwordInput.value;
    const captchaInputVal = captchaInput.value;
    const rememberMe = rememberMeCheckbox.checked;

    // 清除错误消息
    if (errorMessage) errorMessage.style.display = 'none';

    // 1. 验证验证码
    if (!captchaInputVal) {
        if (errorMessage) {
            errorMessage.textContent = "请输入验证码";
            errorMessage.style.display = 'block';
        }
        return;
    }

    if (captchaInputVal.toUpperCase() !== currentCaptcha) {
        if (errorMessage) {
            errorMessage.textContent = "验证码错误，请重新输入";
            errorMessage.style.display = 'block';
        }
        generateCaptcha(); // 刷新验证码
        return;
    }

    // 2. 验证账号和密码
    if (!username || !password) {
        if (errorMessage) {
            errorMessage.textContent = "请输入用户名和密码";
            errorMessage.style.display = 'block';
        }
        return;
    }

    // 检查用户是否存在
    const user = users.find(u => u.username === username);

    if (!user) {
        if (errorMessage) {
            errorMessage.textContent = "账号未注册，请先注册";
            errorMessage.style.display = 'block';
        }
        return;
    }

    // 检查密码是否正确
    if (user.password !== password) {
        if (errorMessage) {
            errorMessage.textContent = "密码错误，请重新输入";
            errorMessage.style.display = 'block';
        }
        return;
    }

    // 记住用户名
    if (rememberMe) {
        localStorage.setItem('rememberedUsername', username);
    } else {
        localStorage.removeItem('rememberedUsername');
    }

    // 保存登录状态
    localStorage.setItem('isLoggedIn', 'true');
    localStorage.setItem('currentUser', username);

    // 登录成功，重定向到 index.html
    showCustomMessage("登录成功！", 'success');
    setTimeout(() => {
        window.location.href = "index.html";
    }, 500); // 重定向前的短暂延迟
}

/**
 * @brief 显示注册表单
 * 动态修改登录表单区域的HTML内容为注册表单
 */
function showRegisterForm() {
    const loginFormDiv = document.querySelector('.login-form');
    if (loginFormDiv) {
        loginFormDiv.innerHTML = `
            <h3 style="text-align: center; margin-bottom: 20px; color: #333;">用户注册</h3>
            <input type="text" placeholder="用户名" id="regUsername">
            <input type="password" placeholder="密码" id="regPassword">
            <input type="password" placeholder="确认密码" id="regConfirm">

            <div class="error-message" id="regError"></div>

            <button class="login-btn" id="submitRegister">注册</button>
            <div style="text-align: center; margin-top: 15px;">
                <a href="#" id="backToLogin" style="color: #666; text-decoration: none;">返回登录</a>
            </div>
        `;

        // 为新元素重新绑定事件监听器
        document.getElementById('submitRegister').addEventListener('click', doRegister);
        document.getElementById('backToLogin').addEventListener('click', function(e) {
            e.preventDefault();
            showLoginForm(); // 返回登录界面
        });
    }
}

/**
 * @brief 执行用户注册
 * 验证注册信息，如果有效则添加新用户并保存到 localStorage
 */
function doRegister() {
    const regUsername = document.getElementById('regUsername');
    const regPassword = document.getElementById('regPassword');
    const regConfirm = document.getElementById('regConfirm');
    const regError = document.getElementById('regError');

    if (!regUsername || !regPassword || !regConfirm || !regError) return; // 确保元素存在

    regError.style.display = 'none';

    if (!regUsername.value || !regPassword.value || !regConfirm.value) {
        regError.textContent = "请填写完整信息";
        regError.style.display = 'block';
        return;
    }

    if (regPassword.value !== regConfirm.value) {
        regError.textContent = "两次密码不一致";
        regError.style.display = 'block';
        return;
    }

    if (users.some(u => u.username === regUsername.value)) {
        regError.textContent = "用户名已存在";
        regError.style.display = 'block';
        return;
    }

    // 添加新用户
    users.push({ username: regUsername.value, password: regPassword.value });
    // 保存到 localStorage
    localStorage.setItem('users', JSON.stringify(users));

    showCustomMessage("注册成功！", 'success');
    showLoginForm(); // 注册成功后返回登录界面
}

/**
 * @brief 显示登录表单
 * 重新加载页面以重置表单
 */
function showLoginForm() {
    location.reload(); // 简单的重新加载页面方式
}

/**
 * @brief 初始化所有事件监听器
 * 确保在 DOM 元素可能被重新渲染后正确绑定事件监听器
 */
function initEventListeners() {
    // 在添加监听器前检查元素是否存在
    if (mainCaptcha) mainCaptcha.addEventListener('click', changeCaptcha);
    if (refreshCaptcha) refreshCaptcha.addEventListener('click', changeCaptcha);
    if (loginBtn) loginBtn.addEventListener('click', validateLogin);
    if (registerLink) {
        registerLink.addEventListener('click', function(e) {
            e.preventDefault();
            showRegisterForm();
        });
    }
}

/**
 * @brief 初始化页面
 * 生成验证码并初始化事件监听器
 */
function initPage() {
    generateCaptcha();
    initEventListeners();

    // 检查记住的用户名并预填充
    const rememberedUsername = localStorage.getItem('rememberedUsername');
    if (rememberedUsername && usernameInput) {
        usernameInput.value = rememberedUsername;
        if (rememberMeCheckbox) rememberMeCheckbox.checked = true;
    }
}

// 在窗口加载时初始化
window.onload = initPage;